<template>
  <view class="my-search-container" :style="{backgroundColor: bgcolor}" @click="searchBoxHandler">
    <!-- 使用view组件模拟input输入框的样式 -->
    <view class="my-search-box" :style="{borderRadius: radius+'px'}">
      <icon type="search" size="17"></icon>
      <text class="palceholder">搜索</text>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-search",
    props: {
      // 背景颜色
      bgcolor: {
        type: String,
        default: '#c00000'
      },
      // 圆角尺寸
      radius: {
        type: Number,
        // 单位是px
        default: 18
      }
    },
    data() {
      return {

      };
    },

    methods: {
      searchBoxHandler() {
        // console.log('555');
        // 触发父组件给我们这个自定义组件绑定的 自定义事件myClick，就会执行父组件中的事件处理函数gotoSearch
        // 还可以实现子给父传递数据，父组件通过处理函数的参数获取
        this.$emit('myClick');

      }
    }
  }
</script>

<style lang="scss">
  .my-search-container {
    // background-color: #c00000;
    height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;

    .my-search-box {
      height: 36px;
      background-color: #ffffff;
      // border-radius: 15px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .palceholder {
        font-size: 15px;
        margin-left: 5px;
      }

    }


  }
</style>
